import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useFocusGrid, FocusableItem } from './useFocusGrid';

// 示例：如何使用焦点网格系统
export const FocusGridExample: React.FC = () => {
  const focusGrid = useFocusGrid({
    onFocusChange: (item) => {
      console.log('焦点切换到:', item?.id);
    },
    onItemSelect: (item) => {
      console.log('选择项目:', item.id);
      item.onAction?.('select');
    },
  });

  // 定义焦点网格
  const gridItems: FocusableItem[][] = [
    [
      // 第一行：Tab 和按钮
      {
        id: 'tab-local',
        row: 0,
        col: 0,
        onFocus: () => console.log('聚焦本机 Tab'),
        onSelect: () => console.log('选择本机 Tab'),
      },
      {
        id: 'tab-device',
        row: 0,
        col: 1,
        onFocus: () => console.log('聚焦设备 Tab'),
        onSelect: () => console.log('选择设备 Tab'),
      },
      {
        id: 'button-scan',
        row: 0,
        col: 2,
        onFocus: () => console.log('聚焦扫描按钮'),
        onSelect: () => console.log('执行扫描'),
        onAction: (action) => {
          if (action === 'select') {
            // 扫描后切换到卡片
            focusGrid.navigateTo(1, 0);
          }
        },
      },
      {
        id: 'button-refresh',
        row: 0,
        col: 3,
        onFocus: () => console.log('聚焦刷新按钮'),
        onSelect: () => console.log('执行刷新'),
        onAction: (action) => {
          if (action === 'select') {
            // 刷新后切换到卡片
            focusGrid.navigateTo(1, 0);
          }
        },
      },
    ],
    [
      // 第二行：卡片网格（简化示例）
      {
        id: 'card-1',
        row: 1,
        col: 0,
        onFocus: () => console.log('聚焦卡片 1'),
        onSelect: () => console.log('选择卡片 1'),
      },
      {
        id: 'card-2',
        row: 1,
        col: 1,
        onFocus: () => console.log('聚焦卡片 2'),
        onSelect: () => console.log('选择卡片 2'),
      },
      {
        id: 'card-3',
        row: 1,
        col: 2,
        onFocus: () => console.log('聚焦卡片 3'),
        onSelect: () => console.log('选择卡片 3'),
      },
    ],
  ];

  // 注册焦点网格
  useEffect(() => {
    focusGrid.registerGrid(gridItems);
  }, [focusGrid]);

  const renderGridItem = (item: FocusableItem) => {
    const isFocused = focusGrid.isFocused(item);
    
    return (
      <TouchableOpacity
        key={item.id}
        style={[
          styles.gridItem,
          isFocused && styles.focusedItem,
        ]}
        onPress={() => item.onSelect?.()}
      >
        <Text style={[
          styles.itemText,
          isFocused && styles.focusedText,
        ]}>
          {item.id}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      {/* 第一行：Tab 和按钮 */}
      <View style={styles.row}>
        {gridItems[0].map(renderGridItem)}
      </View>
      
      {/* 第二行：卡片 */}
      <View style={styles.row}>
        {gridItems[1].map(renderGridItem)}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  gridItem: {
    padding: 15,
    margin: 5,
    backgroundColor: '#3a3a3a',
    borderRadius: 8,
    borderWidth: 2,
    borderColor: 'transparent',
  },
  focusedItem: {
    borderColor: '#4a90e2',
    backgroundColor: '#4a4a4a',
    shadowColor: '#4a90e2',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 6,
  },
  itemText: {
    color: '#ffffff',
    fontSize: 14,
  },
  focusedText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
}); 